<template>
	<view class="login">

		<view class="welcome-back">欢迎来到猫之巢!</view>

		<view class="enname-account">Please login to your accounts</view>

		<view class="form">
			<uv-form>
				<uv-form-item labelWidth="160rpx" label="手机号" prop="userInfo.name" borderBottom>
					<uv-input v-model="loginData.phone" :focus="true" border="none" placeholder="手机号">
					</uv-input>
				</uv-form-item>

				<uv-form-item labelWidth="160rpx" label="密码" prop="userInfo.name" borderBottom>
					<uv-input :type="show?'text':'password'" v-model="loginData.password" border="none"
						placeholder="密码必须为字母开头">
					</uv-input>
				</uv-form-item>
			</uv-form>
		</view>

		<view class="forget">忘记密码的</view>

		<view class="btn-login" @click="loginFn">登录</view>

		<view class="btn-register" @click="open">注册</view>

		<!-- 注册的账号密码昵称 -->
		<view class="register-box">
			<uni-popup ref="popup" type="bottom">
				<view class="hanlder-box">
					<view class="register-title">
						<view class="title">注册</view>
						<uni-icons type="closeempty" size="30" color="#c9cacd" @click="close"></uni-icons>
					</view>

					<uv-form>
						<uv-form-item labelWidth="160rpx" label="手机号" prop="userInfo.name" borderBottom>
							<uv-input v-model="registerData.phone" border="none" placeholder="11位手机号">
							</uv-input>
						</uv-form-item>
						<uv-form-item labelWidth="160rpx" label="密码" prop="userInfo.name" borderBottom>
							<uv-input :type="show?'text':'password'" v-model="registerData.password" border="none"
								placeholder="密码必须为字母开头">
							</uv-input>
						</uv-form-item>
						<uv-form-item labelWidth="160rpx" label="昵称" prop="userInfo.name" borderBottom>
							<uv-input v-model="registerData.name" border="none" placeholder="昵称">
							</uv-input>
						</uv-form-item>
						<uv-form-item labelWidth="160rpx" label="性别" prop="userInfo.sex" borderBottom
							@click="showSexSelect">
							<uv-input v-model="sexs[registerData.sex].name" disabled disabledColor="#ffffff" placeholder="请选择性别"
								border="none">
							</uv-input>
							<template v-slot:right>
								<uv-icon name="arrow-right"></uv-icon>
							</template>
						</uv-form-item>

						<view class="btn-login" @click="registerFn">注册</view>
					</uv-form>

					<uv-action-sheet ref="sexSelect" :actions="sexs" title="请选择性别" @select="sexSelect">
					</uv-action-sheet>
				</view>


			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,

				loginData: {
					phone: "",
					password: "",
				},
				registerData: {
					phone: "",
					password: "",
					name: "",
					sex: 2
				},
				userInfo: {
					name: ''
				},
				sexs: [{
					name: '男',
					value: 0
				}, {
					name: '女',
					value: 1
				}, {
					name: '保密',
					value: 2
				}],

			}
		},
		onLoad() {
			
		},
		methods: {
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			loginFn() {
				uni.request({
					url: '/user/login',
					method: 'POST',
					data: {
						phone: this.loginData.phone,
						password: this.loginData.password
					},
					success: (res) => {
						console.log(res);
						if (res.data.code == 200) {
							window.localStorage.setItem("user", JSON.stringify(res.data.data));
							uni.switchTab({
								url: '/pages/index/index'
							})
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'fail'
							})
						}
					}
				})
			},
			registerFn() {
				console.log(this.registerData);
				uni.request({
					url: '/user/register',
					method:"POST",
					data:this.registerData,
					success: (res) => {
						console.log(res);
					}
				})
			},
			showSexSelect() {
				this.$refs.sexSelect.open();
				this.hideKeyboard();
			},
			// 性别选择返回结果
			sexSelect(e) {
				console.log(e.value);
				this.registerData.sex = e.value
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: white;
	}
	.register-box{
		padding-bottom: 20rpx;
	}
	.login {

		.nav {
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			border-bottom: 1rpx solid #d9d9d9;

			image {
				width: 60rpx;
			}

			.nav-left {
				display: flex;
				align-items: center;
				color: #666768;
				font-size: 30rpx;
				font-weight: 600;
			}

			.nav-right {
				color: #2a4ccc;
				font-size: 28rpx;
				font-weight: 600;
			}
		}

		.welcome-back {
			margin-top: 120rpx;
			margin-left: 30rpx;
			font-weight: 600;
			font-size: 48rpx;
			color: #646566;

		}

		.enname-account {
			color: #9e9db0;
			margin-top: 30rpx;
			margin-left: 30rpx;
		}

		.form {
			margin: 30rpx;
		}

		.forget {
			float: right;
			font-size: 26rpx;
			color: #777578;
			margin-right: 30rpx;
			margin-top: 30rpx;
		}

		.btn-login {
			background: #e89abe;
			color: white;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			margin: 0 30rpx;
			margin-top: 200rpx;
			border-radius: 50rpx;
		}

		.btn-register {
			background: white;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			margin: 0 30rpx;
			margin-top:50rpx;
			border-radius: 50rpx;
			border: 1rpx solid gray;
		}

		.hanlder-box {

			background-color: white;
			height: 600rpx;
			padding: 20rpx;

			.btn-login {
				margin-top: 70rpx;
			}
		}

		.register-title {
			display: flex;
			justify-content: space-between;

			.title {
				font-weight: 600;
				font-size: 48rpx;
				color: #646566;
			}
		}


	}
</style>